<template>
	<div id='runManage'>
		<div class="breadcrumb">
			<img src="../../../../static/img/outClass_icon_1.png" class="head_img">
			<span class="title">跑步管理</span>
		</div>

		<div class="search">
			<el-select v-model="semester" @change="changeSemester">
				<el-option label="全部学期" value='0'></el-option>
				<el-option v-for='item in semesters' :label='item.semesterName' :value='item.sid' :key="item.sid">
				</el-option>
			</el-select>
			<el-select v-model="teacher" @change="changeTeacher()" :disabled="isDisabled" v-if="user.type !==3">
				<el-option label="全部老师" value='0'></el-option>
				<el-option v-for='item in teachers' :label='item.teacherName' :value='item.mid' :key="item.mid">
				</el-option>
			</el-select>
			<el-select v-model="course" :disabled="isDisabled">
				<el-option label="全部课程" value='0'></el-option>
				<el-option v-for='item in courses' :label='item.name' :value='item.cid' :key="item.cid">
				</el-option>
			</el-select>
			<el-select v-model="verifyStatus">
				<el-option label="全部审核状态" value='0'></el-option>
				<el-option label="待审核" value='2'></el-option>
				<el-option label="审核通过" value='3'></el-option>
				<el-option label="审核未通过" value='4'></el-option>
			</el-select>
			<br>
			<div class="timeSelect">
				<el-date-picker type='date' v-model="beginAt" placeholder="请选择开始时间" style="margin-right:10px;" class="qizhiDate" @change='changeBeginAt'></el-date-picker>
			</div>
			<div class="timeSelect">
				<el-date-picker type='date' v-model="endAt" placeholder="请选择结束时间" class="qizhiDate" @change="changeEndAt"></el-date-picker>
			</div>
			<el-button class="sel_btn" type="primary" @click="getResult">筛选</el-button>
		</div>

		<div class="list">
			<div class="list_head">
				<el-input class="inp" placeholder="请输入学生手机号,学号或姓名" icon="search" v-model="condition" @keyup.enter.native="getResult" :on-icon-click="getResult"></el-input>
				<div class="valiBtn">
					<el-button type="primary" @click="auditPassAll">批量通过</el-button>
					<el-button type="primary" @click="auditPassAllno">批量不通过</el-button>
				</div>
			</div>
			<el-table :data="list" ref="multipleTable" @selection-change="handleSelectionChange" @cell-click="toDetail">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="expand" label="展开">
					<template scope="scope">
						<el-form label-position="right" inline class="demo-table-expand">
							<el-form-item label="开始时间：">
								<span>{{scope.row.beginAt}}</span>
							</el-form-item>
							<el-form-item label="运动时长：">
								<span>{{ scope.row.duration }}</span>
							</el-form-item>
							<el-form-item label="配速：">
								<span>{{ scope.row.speed }}</span>
							</el-form-item>
							<el-form-item label="跑步里程：">
								<span>{{ scope.row.length }}</span>
							</el-form-item>
							<el-form-item label="步频：">
								<span>{{ scope.row.avgStepFreq }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column prop="campusId" label="学号" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="name" label="姓名" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="跑步模式">
					<template scope="scope">
						<span v-if="scope.row.runMode ==1">随机终点</span>
						<span v-if="scope.row.runMode ==2">操场跑</span>
						<span v-if="scope.row.runMode ==3">约定终点</span>
						<span v-if="scope.row.runMode ==4">自由跑</span>
					</template>
				</el-table-column>
				<el-table-column label="审核状态">
					<template scope="scope">
						<span v-if="scope.row.appealStatus ==2">待审核</span>
						<span v-if="scope.row.appealStatus ==3">审核通过</span>
						<span v-if="scope.row.appealStatus ==4">审核未通过</span>
					</template>
				</el-table-column>
				<el-table-column prop="verifyTime" label="审核时间" min-width="170">
				</el-table-column>
				<el-table-column width="160" align="right">
					<!--1.异常状态为正常(0)可以不通过，否则(1,2)可以通过；2.待审核，可以通过与不通过 -->
					<template scope="scope">
						<el-button size="small" type="text" @click.stop="auditpass(scope.row)" v-if="(scope.row.appealStatus ==2 || scope.row.exceptionStatus != 0)">通过</el-button>
						<el-button size="small" type="text" @click.stop="auditpassno(scope.row)" v-if=" (scope.row.appealStatus ==2 || scope.row.exceptionStatus == 0)">不通过</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
		<!-- 异常类型，exceptionType:1,配速异常;2,步频异常;3,代跑作弊;4,未知原因 -->
		<el-dialog title="请填写审核不通过的原因" :visible.sync="dialogFormVisible">
			<el-form>
				<el-form-item :label-width="formLabelWidth" label="异常原因:">
					<el-select v-model="mainType" @change="changeMainType">
						<el-option value="1" label="成绩异常"></el-option>
						<el-option value="2" label="作弊"></el-option>
					</el-select>
					<el-select v-model="exceptionType">
						<el-option v-if="mainType == '1'" value="1" label="配速异常"></el-option>
						<el-option v-if="mainType == '1'" value="2" label="步频异常"></el-option>
						<el-option v-if="mainType == '1'" value="3" label="未知原因"></el-option>
						<el-option v-if="mainType == '2'" value="101" label="人肉代跑"></el-option>
						<el-option v-if="mainType == '2'" value="102" label="骑车作弊"></el-option>
						<el-option v-if="mainType == '2'" value="103" label="其他作弊"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input type="textarea" v-model="verifyInfo">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitVerity()">确 定</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				rrids: [],
				courses: [],
				teachers: [],
				semesters: [],
				verifyRow: "",
				verifyInfo: "",
				mainType: "1",
				totalCount: 0,
				exceptionType: "1",
				formLabelWidth: "85px",
				dialogFormVisible: false,
				course: this.$util.getUrlParam("cid") || "0",
				teacher: this.$util.getUrlParam("mid") || "0",
				semester: this.$util.getUrlParam("sid") || "0",
				condition: this.$util.getUrlParam("condition") || "",
				verifyStatus: this.$util.getUrlParam("verifyStatus") || "0",
				currentPage: parseInt(this.$util.getUrlParam("pageNum")) || 1,
				isDisabled: this.$util.getUrlParam("sid") != "0" ? false : true,
				endAt: this.$util.getUrlParam("endAt") ? new Date(this.$util.getUrlParam("endAt") * 1) : new Date(new Date().format("yyyy/MM/dd 23:59:59")),
				beginAt: this.$util.getUrlParam("beginAt") ? new Date(this.$util.getUrlParam("beginAt") * 1) : new Date(new Date().format("yyyy/MM/dd 00:00:00"))
			};
		},
		mounted() {
			this.clearStore();
			this.getSemesters();
			if (this.$util.getUrlParam("cid")) {
				this.getClasses();
			}
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			changeMainType() {
				this.exceptionType = this.mainType == "1" ? "1" : "101";
			},
			//学期列表
			getSemesters() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let semesterList = response.data.data;
						if (semesterList && semesterList.length > 0) {
							let sid = this.$util.getUrlParam("sid");
							if (!sid) {
								this.semester = semesterList[0].sid + "";
							}
							for (let i = 0; i < semesterList.length; i++) {
								this.semesters.push({
									unids: semesterList[i].unids,
									sid: semesterList[i].sid + "",
									endDate: semesterList[i].endDate,
									startDate: semesterList[i].startDate,
									semesterName: semesterList[i].semesterName
								});
							}
						}

						if (this.user.type == 3) {
							this.teacher = this.user.mid;
							this.getResult();
						} else {
							this.getTeachers();
						}
					}
				});
			},
			changeSemester() {
				let now = new Date().getTime() * 1;
				if (this.semester == "0") {
					this.isDisabled = true;

					if (this.user.type != 3) {
						this.teacher = "0";
					}
					
					this.course = "0";
					this.beginAt = new Date(new Date().format("yyyy/MM/dd 00:00:00"));
					this.endAt = new Date(
						new Date(new Date().format("yyyy/MM/dd 23:59:59"))
					);
				} else {
					this.isDisabled = false;
					for (let i = 0; i < this.semesters.length; i++) {
						if (this.semester == this.semesters[i].sid) {
							let startDate = this.semesters[i].startDate * 1;
							let endDate = this.semesters[i].endDate * 1;
							if (now > startDate && now < endDate) {
								this.beginAt = new Date(new Date().format("yyyy/MM/dd 00:00:00"));
								this.endAt = new Date(new Date().format("yyyy/MM/dd 23:59:59"));
							} else {
								this.endAt = new Date(endDate);
								this.beginAt = new Date(endDate).setTime(endDate - 7 * 3600 * 1000 * 24);
							}
						}
					}
				}
				this.course = "0";
				this.getClasses();
			},
			changeTeacher() {
				this.course = "0";
				this.getClasses();
			},
			//教师列表
			getTeachers() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/teachers";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let teacherList = response.data.data;
						if (teacherList && teacherList.length > 0) {
							let mid = this.$util.getUrlParam("mid");
							if (!mid) {
								this.teacher = teacherList[0].mid + "";
							}
							for (let i = 0; i < teacherList.length; i++) {
								this.teachers.push({
									mid: teacherList[i].mid + "",
									teacherName: teacherList[i].teacherName
								});
							}
						}
						this.getResult();
					}
				});
			},
			//课程列表
			getClasses() {
				this.courses = [];
				let url = this.$util.domain + "/campusadminapi/v1/tools/classes";

				if (this.teacher == "0" || this.semester == "0") {
					this.course = "0";
					return;
				}

				this.$http({
					url,
					method: "GET",
					params: {
						mid: this.teacher,
						sid: this.semester
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let coursesList = response.data.data;
						if (coursesList && coursesList.length > 0) {
							for (let i = 0; i < coursesList.length; i++) {
								this.courses.push({
									name: coursesList[i].name,
									cid: coursesList[i].id + ""
								});
							}
						}
					}
				})
			},
			//成绩列表,appealStatus,审核状态, 0,1-未申诉、2-待审核、3-审核通过、4-审核未通过
			//异常状态，exceptionStatus，,0，常；1，异常
			getResult() {
				this.list = [];
				let url = this.$util.domain + "/campusadminapi/v1/runnningmanager/list";
				let endAt = new Date(new Date(new Date(this.endAt).format("yyyy/MM/dd 23:59:59"))).getTime() * 1;
				let beginAt = new Date(new Date(new Date(this.beginAt).format("yyyy/MM/dd 00:00:00"))).getTime() * 1;

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						stopAt: endAt,
						beginAt: beginAt,
						pageNum: this.currentPage,
						cid: parseInt(this.course),
						mid: parseInt(this.teacher),
						sid: parseInt(this.semester),
						keyWords: this.condition.trimLeft(),
						verifyStatus: parseInt(this.verifyStatus)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let runList = response.data.data.recordList;
						this.totalCount = response.data.data.totalCount;
						this.list = [];
						if (runList && runList.length > 0) {
							for (let i = 0; i < runList.length; i++) {
								let $index = i + 1,
									$campusId = runList[i].campusId,
									$name = runList[i].name,
									$beginAt = runList[i].beginAt,
									$duration = runList[i].duration,
									$speed = runList[i].speed,
									$length = runList[i].length,
									$avgStepFreq = runList[i].avgStepFreq,
									$runMode = runList[i].runMode,
									$verifyTime = runList[i].verifyTime,
									$appealStatus = runList[i].appealStatus,
									$rrid = runList[i].rrid,
									$uid = runList[i].uid,
									$exceptionStatus = runList[i].exceptionStatus;
								if ($verifyTime !== 0) {
									$verifyTime = new Date($verifyTime).format(
										"yyyy/MM/dd hh:mm:ss"
									); //转换审核时间
								} else {
									$verifyTime = "";
								}
								let speed = $speed;
								let int = parseInt(speed);
								let float = speed - int;
								$speed = int + "'" + parseInt(float * 60) + '"';
								$duration = Math.ceil($duration / 60) + "min"; //转换分钟
								$length = ($length / 1000).toFixed(2) + "公里"; //转换公里
								$avgStepFreq = $avgStepFreq + "步/分钟"; //转换步频
								$beginAt = new Date($beginAt).format("yyyy/MM/dd hh:mm:ss"); //转换开始时间
								this.list.push({
									uid: $uid,
									name: $name,
									rrid: $rrid,
									index: $index,
									speed: $speed,
									length: $length,
									beginAt: $beginAt,
									runMode: $runMode,
									campusId: $campusId,
									duration: $duration,
									verifyTime: $verifyTime,
									avgStepFreq: $avgStepFreq,
									appealStatus: $appealStatus,
									exceptionStatus: $exceptionStatus
								});
							}
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				})
			},
			//请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getResult();
			},
			changeBeginAt() {
				let beginAt = new Date(this.beginAt).getTime() * 1;
				let endAt = new Date(this.endAt).getTime() * 1;
				let min, max;

				for (let i = 0; i < this.semesters.length; i++) {
					if (this.semester == this.semesters[i].sid) {
						min = this.semesters[i].startDate;
						max = this.semesters[i].endDate;
					}
				}

				if (beginAt < min) {
					this.beginAt = new Date(min);
				} else if (beginAt > max) {
					this.beginAt = new Date(max);
				}

				if (beginAt > endAt) {
					this.endAt = new Date(this.beginAt);
				}

				if (this.condition) {
					//存在关键字不限制时间
				} else {
					if (endAt - beginAt > 7 * 3600 * 1000 * 24) {
						this.endAt = new Date(this.beginAt).setTime(
							beginAt + 7 * 3600 * 1000 * 24
						);
					}
				}
			},
			changeEndAt() {
				let min, max;
				let endAt = new Date(this.endAt).getTime() * 1;
				let beginAt = new Date(this.beginAt).getTime() * 1;

				for (let i = 0; i < this.semesters.length; i++) {
					if (this.semester == this.semesters[i].sid) {
						min = this.semesters[i].startDate;
						max = this.semesters[i].endDate;
					}
				}

				if (endAt < min) {
					this.endAt = new Date(min);
				} else if (endAt > max) {
					this.endAt = new Date(max);
				}

				if (beginAt > endAt) {
					this.beginAt = new Date(this.endAt);
				}

				if (this.condition) {
					//存在关键字不限制时间
				} else {
					if (endAt - beginAt > 7 * 3600 * 1000 * 24) {
						this.beginAt = new Date(this.endAt).setTime(endAt - 7 * 3600 * 1000 * 24);
					}
				}
			},
			//清除本地存储的变量；
			clearStore() {
				let removeArr = ["rrid", "uid"];
				this.$util.removeStore(removeArr);
			},
			//详情
			toDetail(row, column, cell) {
				let className = cell.className;
				if (className.indexOf("el-table-column--selection") > -1 || className.indexOf("el-table__expand-column") > -1) {
					return;
				}
				let beginAt = new Date(this.beginAt).getTime() * 1;
				let endAt = new Date(this.endAt).getTime() * 1;
				let params = {
					endAt,
					beginAt,
					mid: this.teacher,
					sid: this.semester,
					pageNum: this.currentPage,
					condition: encodeURI(this.condition.trimLeft())
				}
				this.$util.setStore("rrid", row.rrid);
				this.$util.setStore("uid", row.uid);
				this.$util.refreshTo("/#/runDetail", params);
			},
			//审核通过
			auditpass(row) {
				this.rrids = [];

				this.$confirm("确定审核通过？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/student/runnings/updateVerifyStatus";
					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							verifyInfo: "",
							appealStatus: 3,
							rrids: [parseInt(row.rrid)]
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("审核成功");
							this.getResult();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				})
			},
			// 批量通过
			auditPassAll() {
				this.rrids = [];
				if (!this.multipleSelection || this.multipleSelection.length == 0) {
					this.$util.errorMsg("请先选择批量处理的数据", "温馨提示", "warning");
					return;
				}

				this.multipleSelection.forEach(item => {
					if (item.appealStatus == 2 || item.exceptionStatus != 0) {
						this.rrids.push(parseInt(item.rrid));
					}
				});
				if (!this.rrids || this.rrids.length == 0) {
					return;
				}

				this.$confirm("确定批量审核通过？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/student/runnings/updateVerifyStatus";
					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							verifyInfo: "",
							appealStatus: 3,
							rrids: this.rrids
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("审核成功");
							this.getResult();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => { });
			},
			// 批量不通过
			auditPassAllno() {
				this.rrids = [];
				if (!this.multipleSelection || this.multipleSelection.length == 0) {
					this.$util.errorMsg("请先选择批量处理的数据", "温馨提示", "warning");
					return;
				}

				this.multipleSelection.forEach(item => {
					if (item.appealStatus == 2 || item.exceptionStatus == 0) {
						this.rrids.push(parseInt(item.rrid));
					}
				});
				if (!this.rrids || this.rrids.length == 0) {
					return;
				}
				this.dialogFormVisible = true;
			},
			//批量提交
			submitVerity() {
				if (this.verifyInfo.trim().length > 50) {
					this.dialogFormVisible = false;
					this.$util.errorMsg("审核理由字符太长了");
					return;
				}
				let url = this.$util.domain + "/student/runnings/updateVerifyStatus";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						appealStatus: 4,
						rrids: this.rrids,
						verifyInfo: this.verifyInfo,
						exceptionType: parseInt(this.exceptionType)
					})
				}).then(response => {
					this.dialogFormVisible = false;
					if (response.data.error == 10000) {
						this.$util.successMsg("审核成功");
						this.getResult();
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//审核不通过
			auditpassno(row) {
				this.mainType = '1';
				this.rrids = [];
				this.verifyRow = row;
				if (row.runMode == 4) {
					this.exceptionType = "3";
				} else {
					this.exceptionType = "1";
				}
				if (row.exceptionStatus && row.exceptionStatus != 0) {
					this.exceptionType = row.exceptionStatus;
				}
				this.dialogFormVisible = true;
				this.verifyInfo = "";
				this.rrids.push(parseInt(row.rrid));
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		}
	}
</script>

<style>
	#runManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#runManage .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #f7fcff;
		cursor: pointer;
	}

	#runManage .valiBtn {
		display: inline-block;
		position: absolute;
		right: 0;
	}

	#runManage .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 90px;
		padding: 25px;
		position: relative;
	}

	#runManage .sel_btn {
		position: absolute;
		right: 25px;
		top: 13px;
		margin-top: 12px;
	}

	#runManage .el-select {
		display: inline-block;
		width: 20%;
	}

	#runManage .time {
		display: inline-block;
		width: 15%;
		min-width: 150px;
	}

	#runManage .timeSelect {
		display: inline-block;
		margin-top: 15px;
	}

	#runManage .inp {
		display: inline-block;
		width: 350px;
	}

	#runManage .demo-table-expand {
		font-size: 0;
		color: #99a9bf;
	}

	#runManage .demo-table-expand label {
		color: #99a9bf;
	}

	#runManage .demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>